<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddDialog">添加分类</el-button>
        </el-col>
      </el-row>
      <tree-table
        :data="cateList"
        :columns="columns"
        :expand-type="false"
        show-index
        index-text="#"
        :show-row-hover="false"
        :selection-type="false"
        border
      >
        <template slot="cat_deleted" slot-scope="{ row }">
          <i
            class="el-icon-success"
            style="color: green"
            v-if="!row.cat_deleted"
          ></i>
          <i class="el-icon-error" style="color: red" v-else></i>
        </template>
        <template slot="cat_level" slot-scope="{ row }">
          <el-tag size="mini" v-if="row.cat_level === 0">一级</el-tag>
          <el-tag size="mini" type="success" v-else-if="row.cat_level === 1"
            >二级</el-tag
          >
          <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>
        <template slot="opt">
          <el-button type="primary" size="mini" icon="el-icon-edit"
            >编辑</el-button
          >

          <el-button type="danger" size="mini" icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </tree-table>
      <!-- 页码条 -->
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageChange"
        :current-page="queryData.pagenum"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="queryData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <el-dialog
        title="新增分类"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="handleAddDialogClose"
      >
        <!-- 新增表单 -->
        <el-form
          ref="addFormRef"
          :model="addForm"
          :rules="addRules"
          label-width="80px"
        >
        <!-- prop跟表单验证和表单重置都有关系 -->
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类"> </el-form-item>
          <!-- 选中值，候选数组，鼠标悬浮展开子菜单，是否可以选中任意级，显示用的属性，选中的属性 -->
          <el-cascader v-model="selectedKeys"
          :options="parentCateList"
          clearable
          :props="{expandTrigger: 'hover',
          checkStrictly: true,
          label: 'cat_name',
          value: 'cat_id'
          }"
          @change="handleCascaderChange"
          ></el-cascader>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCate">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 数据
      queryData: {
        pagenum: 1, // 当前页码
        pagesize: 10 // 页容量
      },
      cateList: [], // 分类数组
      total: 0, // 总条数
      // 定义列定义
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          type: 'template',
          template: 'cat_deleted'
        },
        {
          label: '排序',
          prop: 'cat_level',
          type: 'template',
          template: 'cat_level'
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt'
        }
      ],
      addDialogVisible: false, // 是否显示新增对话框
      addForm: {
        // 表单数据对象
        cat_name: '', // 分类名称
        cat_pid: '', // 分类的父id
        cat_level: ''// 分类等级0-一级，1-二级，2-三级
      },
      addRules: {
        // 表单校验规则对象
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      },
      // 商品父级分类列表
      parentCateList: [],
      // 选中的分类
      selectedKeys: []
    }
  },
  created () {
    this.getCateList()
  },
  methods: {
    // 异步请求 分类列表
    async getCateList () {
      // 发送异步请求，并 解构返回对象中的 data属性，赋值给 resBody
      const { data: resBody } = await this.$http.get('categories', {
        params: this.queryData
      })
      console.log(resBody)
      // 如果失败，则显示错误消息，并退出函数执行
      if (resBody.meta.status !== 200) return this.$msg.error(resBody.meta.msg)
      // 如果成功，则将返回的 分页数据 设置给 组件的 data，触发 视图的重绘
      this.cateList = resBody.data.result
      // 将 返回的 总分类数量 设置给 data
      this.total = resBody.data.total
    },
    pageSizeChange (newPageSize) {
      // 将 选择 的 新的 页容量 ，设置给 data
      this.queryData.pagesize = newPageSize
      // 重新请求 当前页数据
      this.getCateList()
    },
    pageChange (newPageIndex) {
      // 将 被点击的 页码 设置给 data
      this.queryData.pagenum = newPageIndex
      // 重新请求 当前页数据
      this.getCateList()
    },
    handleAddDialogClose () { // 关闭对话框事件
      this.$refs.addFormRef.resetFields()
      this.addForm = { // 表单数据对象
        cat_name: '', // 分类名称
        cat_pid: 0, // 分类的父id
        cat_level: 0 // 分类等级0-一级，1-二级，2-三级
      }
      this.selectedKeys = []
    },
    addCate () {
      // 添加用户
      // 校验表单
      this.$refs.addFormRef.validate(async isOk => {
        // 如果校验失败，则退出函数
        if (!isOk) return false
        // 如果成功，则发送异步请求
        const { data: resBody } = await this.$http.post('categories', this.addForm)
        // 如果 添加失败，则返回
        if (resBody.meta.status !== 201) { return this.$msg.error(resBody.meta.msg) }
        // 如果 添加成功，则重新请求渲染列表
        this.getCateList()
        // 关闭窗口
        this.addDialogVisible = false
        // 提示消息
        this.$msg.success(resBody.meta.msg)
      })
    },
    showAddDialog () {
      // 打开对话框，发起请求
      this.getParentCateList()
      this.addDialogVisible = true
    },
    async getParentCateList () {
      const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
      // 获取数据
      this.parentCateList = res.data
    },
    // 改变级联的值触发方法
    handleCascaderChange () {
      // 父id是选中id的最后一项，如果没选值为0
      this.addForm.cat_pid = this.selectedKeys.length === 0 ? 0 : this.selectedKeys[this.selectedKeys.length - 1]
      //   分类等级和选中id数组长度相同
      this.addForm.cat_level = this.selectedKeys.length
    }
  }
}
</script>

<style lang="less" scoped></style>
